<template>
  <div class="mod-config">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>生成考勤数据</span>
<!--        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
      </div>
      <el-form
        :inline="true"
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        class="up_class"
      >
        <el-form-item
          label="上传打卡照" prop="picName">
          <!-- <el-input v-model="dataForm.imageBase64" placeholder="base64"></el-input> -->
          <el-upload
            class="avatar-uploader"
            :action="upUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"

          >
            <img v-if="seePic" :src="seePic" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!--
        @keyup.enter.native="getDataList()"
        -->
        <el-row>
          <el-col :span="12" >
            <el-form-item prop="projectCode">
              项目：
              <el-select
                label="项目"
                clearable
                @change="getParams"
                v-model="dataForm.projectCode"
                placeholder="请选择项目"
                size:medium
              >
                <el-option
                  v-for="item in optionsprojectId"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="positionTitle">
              岗位：
              <el-select
                clearable
                v-model="dataForm.positionTitle"
                @change="changPositionTitle"
                placeholder="请选择岗位"
                size:medium
              >
                <el-option
                  v-for="item in optionsPositionTitleList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            起止时间：
            <el-form-item prop="startTime">
              <el-date-picker
                v-model="startEndTime"
                value-format="yyyy-MM-dd"
                type="daterange"
                align="right"
               @change="dateConversion"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
               >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" >

            <el-form-item prop="personnelProfileIds">
              人员：
              <el-select
                clearable
                multiple
                v-model="dataForm.personnelProfileIds"
                placeholder="请选择人员信息"
                size:medium
              >
                <el-option
                  v-for="item in personnelProfileList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>



        </el-row>


        <el-button style="float: right" type="success"  @click="submit" round>提交</el-button>
      </el-form>
    </el-card>


  </div>
</template>

<script>
export default {
  data() {
    return {
      upUrl: this.$http.adornUrl(`/sys/getParamenters/changeBase64`),
      picData:'',
      seePic:'',
      optionsprojectId:[],
      optionsPositionTitleList:[],
      personnelProfileList:[],
      optionsdevice:[],
      startEndTime:[],
      dataForm: {
        projectCode: "",
        positionTitle: "",
        // deviceId:'',
        personnelProfileIds:[],
        startTime:'',
        endTime:'',
        pic:'',
        picName:'',

      },
      condition:{
        select1: '',
      },
      params:{
        personnelProfile:{
          "id":''
        },
        startTime:'',
        endTime:''
      },

      dataRule: {
        picName:[{
          required: true, message: "打卡照不能为空", trigger: "blur"
        }],
        projectCode:[{
          required: true, message: "项目不能为空", trigger: "blur"
        }],

        personnelProfileIds:[{
          required: true, message: "人员不能为空", trigger: "blur"
        }],
        startTime:[{
          required: true, message: "时间范围不能为空", trigger: "blur"
        }],
        endTime:[{
          required: true, message: "时间范围不能为空", trigger: "blur"
        }]

      }

    };
  },
  components: {

  },
  activated() {
    this.getProject();
    this.getPositionTitle();
  },

  methods: {
    submit(){
      let url="/sys/battendancefalsedata/batchAddAttendance";
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              url
            ),
            method: "post",
            data: this.$http.adornData({
              projectCode: this.dataForm.projectCode,
              // positionTitle: this.dataForm.positionTitle,
              // deviceId: this.dataForm.deviceId,
              personnelProfileIds: this.dataForm.personnelProfileIds,
              startTime: this.dataForm.startTime,
              endTime: this.dataForm.endTime,
              pic: this.dataForm.pic,
              picName: this.dataForm.picName
              // clockingLongitude: this.dataForm.clockingLongitude,
              // clockingLatitude: this.dataForm.clockingLatitude
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    beforeAvatarUpload(file) {},
    handleAvatarSuccess(res, file) {
      console.log(file);
      if (res.msg === "success") {
        this.seePic = "data:image/png;base64," + res.code;
        this.dataForm.picName = file.name;
        this.dataForm.pic = res.code;;
      }
    },
    dateConversion(dataList){
      this.dataForm.startTime=dataList[0];
      this.dataForm.endTime=dataList[1];
      console.log(dataList)
      console.log(this.dataForm.startTime)
      console.log(this.dataForm.endTime)
    },
    changPositionTitle(positionTitle){
      this.dataForm.personnelProfileIds=[];
      let code= this.dataForm.projectCode;
      let projectId = null;
      if(code!=null && code!='' && code!=undefined && code!="null"){
        let projectList = this.optionsprojectId.filter(dto=> {return dto.code === this.dataForm.projectCode});
        if(projectList!=null && projectList.length>0){
          //查询人员
          projectId= projectList[0].id;
        }
      }
      this.getPersonnelprofileList(projectId,positionTitle);
    },
    getPersonnelprofileList(projectId,positionTitle){
      this.$http({
        url: this.$http.adornUrl(`/largeScreen/getPersonnelproffileList?projectId=${projectId}&positionTitle=${positionTitle}`),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.personnelProfileList = data.data;
        }
      });
    },
    getProject(){
      this.$http({
        url: this.$http.adornUrl(`/sys/getParamenters/getProjectList`),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.optionsprojectId = data.list;
        }
      });
    },
    //获取岗位
    getPositionTitle(){
      this.$http({
        url: this.$http.adornUrl(`/sys/getParamenters/getPositionTitle`),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.optionsPositionTitleList = data.list;
        }
      });
    },

    //获取设备、
    getParams(projectCode){
      let projectList = this.optionsprojectId.filter(dto=> {return dto.code === projectCode});
      if(projectList!=null && projectList.length>0){
        //查询人员
        this.getPersonnelprofileList(projectList[0].id,this.dataForm.positionTitle);
      }
      // this.dataForm.deviceId='';
      this.dataForm.personnelProfileIds=[];
      //获取设备
      this.$http({
        url: this.$http.adornUrl(`/sys/getParamenters/getBgateequipment?projectCode=`+projectCode),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.optionsdevice = data.list;
        }
      });
    }


  }
};
</script>

<style scoped lang="scss">
.up_class .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.up_class .avatar-uploader .el-upload:hover {
  border-color: #17b3a3;
}
.up_class .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.up_class .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

